<template>
  <div class="transport-analytics-container">
    <div class="page-header">
      <div class="header-title">
        <h2>运输统计分析</h2>
        <span class="subtitle">查看运输数据统计和分析报表</span>
      </div>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="dateShortcuts"
          @change="handleDateChange"
        />
        <el-button type="primary" @click="refreshData">
          <el-icon><Refresh /></el-icon>刷新数据
        </el-button>
        <el-button @click="exportReport">
          <el-icon><Download /></el-icon>导出报表
        </el-button>
      </div>
    </div>

    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-icon">
            <el-icon><Van /></el-icon>
          </div>
          <div class="statistic-content">
            <div class="statistic-value">{{ statistics.totalOrders }}</div>
            <div class="statistic-label">总订单数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-icon">
            <el-icon><Place /></el-icon>
          </div>
          <div class="statistic-content">
            <div class="statistic-value">{{ statistics.totalDistance }} km</div>
            <div class="statistic-label">总里程</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-icon">
            <el-icon><Money /></el-icon>
          </div>
          <div class="statistic-content">
            <div class="statistic-value">¥ {{ statistics.totalCost.toFixed(2) }}</div>
            <div class="statistic-label">总成本</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="statistic-card">
          <div class="statistic-icon">
            <el-icon><Timer /></el-icon>
          </div>
          <div class="statistic-content">
            <div class="statistic-value">{{ statistics.onTimeRate }}%</div>
            <div class="statistic-label">准时率</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 订单趋势图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>订单趋势</span>
              <el-radio-group v-model="orderTrendType" size="small" @change="updateOrderTrend">
                <el-radio-button label="daily">日</el-radio-button>
                <el-radio-button label="weekly">周</el-radio-button>
                <el-radio-button label="monthly">月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 实际应用中这里会集成图表组件 -->
            <div class="chart-placeholder">
              <el-empty description="图表加载中...">
                <template #image>
                  <el-icon style="font-size: 60px"><DataLine /></el-icon>
                </template>
                <template #description>
                  <p>此处将显示订单趋势图表</p>
                </template>
              </el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 成本分析图 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>成本分析</span>
              <el-radio-group v-model="costAnalysisType" size="small" @change="updateCostAnalysis">
                <el-radio-button label="category">类别</el-radio-button>
                <el-radio-button label="vehicle">车辆</el-radio-button>
                <el-radio-button label="route">路线</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 实际应用中这里会集成图表组件 -->
            <div class="chart-placeholder">
              <el-empty description="图表加载中...">
                <template #image>
                  <el-icon style="font-size: 60px"><PieChart /></el-icon>
                </template>
                <template #description>
                  <p>此处将显示成本分析图表</p>
                </template>
              </el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 车辆利用率 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>车辆利用率</span>
              <el-select v-model="vehicleUtilizationFilter" size="small" placeholder="选择车型" @change="updateVehicleUtilization">
                <el-option label="全部" value="all"></el-option>
                <el-option label="中型厢式货车" value="medium"></el-option>
                <el-option label="大型厢式货车" value="large"></el-option>
                <el-option label="冷藏车" value="refrigerated"></el-option>
              </el-select>
            </div>
          </template>
          <div class="chart-container">
            <!-- 实际应用中这里会集成图表组件 -->
            <div class="chart-placeholder">
              <el-empty description="图表加载中...">
                <template #image>
                  <el-icon style="font-size: 60px"><DataAnalysis /></el-icon>
                </template>
                <template #description>
                  <p>此处将显示车辆利用率图表</p>
                </template>
              </el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 地区分布 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>地区分布</span>
              <el-radio-group v-model="regionDistributionType" size="small" @change="updateRegionDistribution">
                <el-radio-button label="origin">发货地</el-radio-button>
                <el-radio-button label="destination">目的地</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <!-- 实际应用中这里会集成图表组件 -->
            <div class="chart-placeholder">
              <el-empty description="图表加载中...">
                <template #image>
                  <el-icon style="font-size: 60px"><MapLocation /></el-icon>
                </template>
                <template #description>
                  <p>此处将显示地区分布图表</p>
                </template>
              </el-empty>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- KPI指标 -->
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>KPI指标</span>
              <el-select v-model="kpiTimeRange" size="small" placeholder="时间范围" @change="updateKPI">
                <el-option label="本周" value="week"></el-option>
                <el-option label="本月" value="month"></el-option>
                <el-option label="本季度" value="quarter"></el-option>
                <el-option label="本年" value="year"></el-option>
              </el-select>
            </div>
          </template>
          <el-table :data="kpiData" border style="width: 100%">
            <el-table-column prop="name" label="指标名称" width="180"></el-table-column>
            <el-table-column prop="target" label="目标值" width="120"></el-table-column>
            <el-table-column prop="actual" label="实际值" width="120"></el-table-column>
            <el-table-column prop="completion" label="完成率" width="120">
              <template #default="scope">
                {{ scope.row.completion }}%
              </template>
            </el-table-column>
            <el-table-column label="完成情况" min-width="200">
              <template #default="scope">
                <el-progress 
                  :percentage="scope.row.completion" 
                  :status="getKpiStatus(scope.row.completion)"
                ></el-progress>
              </template>
            </el-table-column>
            <el-table-column prop="trend" label="趋势" width="120">
              <template #default="scope">
                <el-tag :type="getTrendType(scope.row.trend)">
                  {{ getTrendLabel(scope.row.trend) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <!-- 热门路线 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>热门路线</span>
            </div>
          </template>
          <el-table :data="popularRoutes" border style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80"></el-table-column>
            <el-table-column prop="route" label="路线" min-width="200"></el-table-column>
            <el-table-column prop="orderCount" label="订单数" width="100"></el-table-column>
            <el-table-column prop="distance" label="里程(km)" width="100"></el-table-column>
            <el-table-column prop="avgCost" label="平均成本(¥)" width="120"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <!-- 车辆排名 -->
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>车辆排名</span>
              <el-select v-model="vehicleRankingType" size="small" placeholder="排名类型" @change="updateVehicleRanking">
                <el-option label="订单数量" value="orders"></el-option>
                <el-option label="总里程" value="distance"></el-option>
                <el-option label="准时率" value="ontime"></el-option>
              </el-select>
            </div>
          </template>
          <el-table :data="vehicleRanking" border style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80"></el-table-column>
            <el-table-column prop="plateNumber" label="车牌号" width="120"></el-table-column>
            <el-table-column prop="driver" label="司机" width="100"></el-table-column>
            <el-table-column prop="value" label="数值" width="120">
              <template #default="scope">
                <span v-if="vehicleRankingType === 'orders'">{{ scope.row.value }} 单</span>
                <span v-else-if="vehicleRankingType === 'distance'">{{ scope.row.value }} km</span>
                <span v-else-if="vehicleRankingType === 'ontime'">{{ scope.row.value }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="performance" label="表现" min-width="150">
              <template #default="scope">
                <el-progress 
                  :percentage="scope.row.performance" 
                  :color="getPerformanceColor(scope.row.performance)"
                ></el-progress>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Refresh, 
  Download, 
  Van, 
  Place, 
  Money, 
  Timer, 
  DataLine, 
  PieChart, 
  DataAnalysis, 
  MapLocation 
} from '@element-plus/icons-vue'

// 日期范围
const dateRange = ref([
  new Date(new Date().getFullYear(), new Date().getMonth(), 1),
  new Date()
])

// 日期快捷选项
const dateShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 统计数据
const statistics = ref({
  totalOrders: 1256,
  totalDistance: 152680,
  totalCost: 1258600.50,
  onTimeRate: 94.5
})

// 图表类型和筛选
const orderTrendType = ref('daily')
const costAnalysisType = ref('category')
const vehicleUtilizationFilter = ref('all')
const regionDistributionType = ref('origin')
const kpiTimeRange = ref('month')
const vehicleRankingType = ref('orders')

// KPI数据
const kpiData = ref([
  {
    name: '订单完成率',
    target: 95,
    actual: 92.5,
    completion: 97.4,
    trend: 'up'
  },
  {
    name: '准时交付率',
    target: 90,
    actual: 85.2,
    completion: 94.7,
    trend: 'up'
  },
  {
    name: '车辆利用率',
    target: 80,
    actual: 75.8,
    completion: 94.8,
    trend: 'stable'
  },
  {
    name: '平均运输成本',
    target: 1000,
    actual: 1050,
    completion: 95.2,
    trend: 'down'
  },
  {
    name: '客户满意度',
    target: 90,
    actual: 88.6,
    completion: 98.4,
    trend: 'up'
  }
])

// 热门路线
const popularRoutes = ref([
  {
    rank: 1,
    route: '北京 → 上海',
    orderCount: 256,
    distance: 1200,
    avgCost: 8500.00
  },
  {
    rank: 2,
    route: '广州 → 深圳',
    orderCount: 198,
    distance: 140,
    avgCost: 1200.00
  },
  {
    rank: 3,
    route: '上海 → 杭州',
    orderCount: 175,
    distance: 180,
    avgCost: 1500.00
  },
  {
    rank: 4,
    route: '北京 → 天津',
    orderCount: 162,
    distance: 120,
    avgCost: 1000.00
  },
  {
    rank: 5,
    route: '成都 → 重庆',
    orderCount: 145,
    distance: 300,
    avgCost: 2200.00
  }
])

// 车辆排名
const vehicleRanking = ref([
  {
    rank: 1,
    plateNumber: '京A12345',
    driver: '王师傅',
    value: 86,
    performance: 95
  },
  {
    rank: 2,
    plateNumber: '京B67890',
    driver: '李师傅',
    value: 78,
    performance: 90
  },
  {
    rank: 3,
    plateNumber: '京C13579',
    driver: '赵师傅',
    value: 72,
    performance: 85
  },
  {
    rank: 4,
    plateNumber: '京D24680',
    driver: '钱师傅',
    value: 65,
    performance: 80
  },
  {
    rank: 5,
    plateNumber: '京E97531',
    driver: '孙师傅',
    value: 58,
    performance: 75
  }
])

// 获取KPI状态
const getKpiStatus = (completion) => {
  if (completion >= 100) return 'success'
  if (completion >= 80) return 'warning'
  return 'exception'
}

// 获取趋势类型
const getTrendType = (trend) => {
  const trendMap = {
    'up': 'success',
    'stable': 'info',
    'down': 'danger'
  }
  return trendMap[trend] || 'info'
}

// 获取趋势标签
const getTrendLabel = (trend) => {
  const trendMap = {
    'up': '上升',
    'stable': '稳定',
    'down': '下降'
  }
  return trendMap[trend] || '未知'
}

// 获取性能颜色
const getPerformanceColor = (performance) => {
  if (performance >= 90) return '#67c23a'
  if (performance >= 70) return '#e6a23c'
  return '#f56c6c'
}

// 日期变更
const handleDateChange = () => {
  refreshData()
}

// 刷新数据
const refreshData = () => {
  // 实际应用中应该调用API获取数据
  ElMessage.success('数据已刷新')
}

// 导出报表
const exportReport = () => {
  ElMessage.success('报表导出中，请稍候...')
  // 实际应用中应该调用API导出报表
}

// 更新订单趋势
const updateOrderTrend = () => {
  // 实际应用中应该调用API获取数据
  ElMessage.info(`订单趋势类型已更新为: ${orderTrendType.value}`)
}

// 更新成本分析
const updateCostAnalysis = () => {
  // 实际应用中应该调用API获取数据
  ElMessage.info(`成本分析类型已更新为: ${costAnalysisType.value}`)
}

// 更新车辆利用率
const updateVehicleUtilization = () => {
  // 实际应用中应该调用API获取数据
  ElMessage.info(`车辆利用率筛选已更新为: ${vehicleUtilizationFilter.value}`)
}

// 更新地区分布
const updateRegionDistribution = () => {
  // 实际应用中应该调用API获取数据
  ElMessage.info(`地区分布类型已更新为: ${regionDistributionType.value}`)
}

// 更新KPI
const updateKPI = () => {
  // 实际应用中应该调用API获取数据
  ElMessage.info(`KPI时间范围已更新为: ${kpiTimeRange.value}`)
}

// 更新车辆排名
const updateVehicleRanking = () => {
  // 实际应用中应该调用API获取数据
  
  // 模拟不同排名类型的数据
  if (vehicleRankingType.value === 'distance') {
    vehicleRanking.value = [
      {
        rank: 1,
        plateNumber: '京B67890',
        driver: '李师傅',
        value: 15680,
        performance: 98
      },
      {
        rank: 2,
        plateNumber: '京A12345',
        driver: '王师傅',
        value: 14520,
        performance: 92
      },
      {
        rank: 3,
        plateNumber: '京D24680',
        driver: '钱师傅',
        value: 12800,
        performance: 85
      },
      {
        rank: 4,
        plateNumber: '京C13579',
        driver: '赵师傅',
        value: 11200,
        performance: 78
      },
      {
        rank: 5,
        plateNumber: '京E97531',
        driver: '孙师傅',
        value: 9800,
        performance: 70
      }
    ]
  } else if (vehicleRankingType.value === 'ontime') {
    vehicleRanking.value = [
      {
        rank: 1,
        plateNumber: '京C13579',
        driver: '赵师傅',
        value: 98.5,
        performance: 98.5
      },
      {
        rank: 2,
        plateNumber: '京A12345',
        driver: '王师傅',
        value: 96.2,
        performance: 96.2
      },
      {
        rank: 3,
        plateNumber: '京E97531',
        driver: '孙师傅',
        value: 95.8,
        performance: 95.8
      },
      {
        rank: 4,
        plateNumber: '京B67890',
        driver: '李师傅',
        value: 93.4,
        performance: 93.4
      },
      {
        rank: 5,
        plateNumber: '京D24680',
        driver: '钱师傅',
        value: 90.1,
        performance: 90.1
      }
    ]
  } else {
    // 默认为订单数量排名
    vehicleRanking.value = [
      {
        rank: 1,
        plateNumber: '京A12345',
        driver: '王师傅',
        value: 86,
        performance: 95
      },
      {
        rank: 2,
        plateNumber: '京B67890',
        driver: '李师傅',
        value: 78,
        performance: 90
      },
      {
        rank: 3,
        plateNumber: '京C13579',
        driver: '赵师傅',
        value: 72,
        performance: 85
      },
      {
        rank: 4,
        plateNumber: '京D24680',
        driver: '钱师傅',
        value: 65,
        performance: 80
      },
      {
        rank: 5,
        plateNumber: '京E97531',
        driver: '孙师傅',
        value: 58,
        performance: 75
      }
    ]
  }
  
  ElMessage.info(`车辆排名类型已更新为: ${vehicleRankingType.value}`)
}

onMounted(() => {
  // 初始化数据
  refreshData()
})
</script>

<style scoped>
.transport-analytics-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.statistic-card {
  display: flex;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
}

.statistic-icon {
  font-size: 48px;
  color: #409EFF;
  margin-right: 20px;
}

.statistic-content {
  flex: 1;
}

.statistic-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.statistic-label {
  font-size: 14px;
  color: #606266;
}

.chart-row {
  margin-bottom: 20px;
}

.table-row {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-container {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
